<template>
	<view class="reviewFailed">
		<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-11.png"></image>
		<view class="failed_text">
			亲爱的陪宠师
			<view v-if="userInfo.orderTakingRight == '0'">完成以下任务即可开始接单哦。</view>
			<view v-if="userInfo.orderTakingRight == 2">您的接单权已被收回，完成以下任务即可开始接单哦。</view>
		</view>
		<view class="failed_label_box">
			<view class="header">
				<view>任务</view>
				<view>状态</view>
				<view>操作</view>
			</view>
			<view class="main">
				<view>{{examDetail.examName}}</view>
				<view>待完成</view>
				<view class="go_modify" @click="toExam">
					<text>前去查看</text>
					<uni-icons type="right" color="#FF6084" size="12"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import api from '@/api'
	import {ref, reactive,defineEmits,onMounted} from 'vue';
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	const examDetail = ref({})
	const getExam = async () => {
	  const res = await api({
	    method: 'get',
	    url: `/mall/exam/getNewerExam`
	  })
	  examDetail.value = res.data
	}
	const toExam = () => {
		uni.navigateTo({
		  url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${examDetail.value.courseId}`,
		})
	}
	defineExpose({getExam})
</script>

<style scoped lang="scss">
	.reviewFailed{
		background-color: #ffffff;
		margin: 32rpx 0;
		border-radius: 24rpx;
		padding: 120rpx 0;
		
		image{
			display: block;
			width: 72rpx;
			height: 72rpx;
			margin: 80rpx  auto;
		}
		.failed_text{
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		.failed_details{
			width: 636rpx;
			margin: 32rpx auto;
			text-align: center;
			color: #5C5E5E;
			font-size: 30rpx;
		}
		.failed_label_box{
			border: 1px solid #E4E6E6;
			margin:0 32rpx;
			margin-top: 24rpx;
			.header,.main{
				display: flex;
				view{
					padding: 32rpx 0;
					flex: 1;
					text-align: center;
					border-right: 1px solid #E4E6E6;
					&:last-child{
						border-right:none
					}
				}
			}
			.header{
				font-size: 30rpx;
				color: #1B2120;
				font-weight: bold;
				border-bottom: 1px solid #E4E6E6;
			}
			.main{
				font-size: 26rpx;
				color: #5C5E5E;
			}
			.go_modify{
				text{
					text-decoration: underline;
				}
				color: #FF6084;
			}
		}
	}
</style>